<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		/*
		
		linear-gradient：用线性渐变创建图像。
		语法：linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
		
		<angle>：用角度值指定渐变的方向（或角度）。
		to left：
		    设置渐变为从右到左。相当于: 270deg
		to right：
		    设置渐变从左到右。相当于: 90deg
		to top：
		    设置渐变从下到上。相当于: 0deg
		to bottom：
		    设置渐变从上到下。相当于: 180deg。默认值
		 */

		#dv{
			border: solid;
			width: 100px;
			height:100px;
			background:linear-gradient(to top right, #fff123, #fefefe,#fff123);
		}

		#dv2{
			border: solid;
			width: 100px;
			height:100px;
			background:linear-gradient(to top left, #ffffff, #000000,#ffffff);
		}

		#dv3{
			border: solid;
			width: 100px;
			height:100px;
			background:linear-gradient(to bottom , #ffffff, #000000,#ffffff);
		}
	</style>
</head>
<body>
	<DIV id="dv"></DIV>
	<br>
	<div id="dv2"></div>
	<br>
	<div id="dv3"></div>
</body>
</html>